<template>
  <div class="container">
    <!--    <el-form :inline="true" :model="searchWords" class="search">
      <el-form-item>
        <el-button :icon="Search" @click="initList()" />
      </el-form-item>
    </el-form>-->
    <div class="containList">
      <div class="title" v-if="tableList1.length > 0">
        <div class="title_1"></div>
        单选题：
      </div>
      <div class="model" v-for="(item, index) in tableList1" :key="item?.id">
        <div class="model_txt">
          <div class="model_subject">
            {{ index + 1 }}、{{ item.questionSubject }}
          </div>
          <div class="model_option">
            <div
              v-for="items in item.optionMiniResponses"
              :key="items.id"
              style="margin: 5px 0"
            >
              <div v-if="items.optionType == 1">
                {{ items.questionOption }}、{{ items.optionContent }}
              </div>
              <div
                v-if="items.optionType == 2"
                style="display: flex; float: left; margin: 15px 15px 15px 0"
              >
                <div style="margin: auto 0">{{ items.questionOption }}、</div>
                <el-image
                  v-if="items.optionContent"
                  style="width: 60px; height: 60px"
                  :src="baseURL + items.optionContent"
                />
              </div>
            </div>
          </div>
          <div class="icon_img">
            <el-image
              :src="
                item.questionState == '1'
                  ? state1
                  : item.questionState == '2'
                  ? state2
                  : item.questionState == '3'
                  ? state3
                  : null
              "
              style="width: 40px; height: 40px"
            ></el-image>
          </div>
          <div class="model_answer">
            答案：{{ item.rightStrQuestionOptions }}
          </div>
          <div class="model_btn">
            <el-button
              size="small"
              plain
              :icon="Edit"
              type="warning"
              @click="edit(item)"
            >
              编辑
            </el-button>
            <el-button
              size="small"
              plain
              :icon="Delete"
              type="danger"
              @click="del(item)"
            >
              删除
            </el-button>
          </div>
        </div>
      </div>
      <div class="title" v-if="tableList2.length > 0">
        <div class="title_1"></div>
        多选题：
      </div>
      <div class="model" v-for="(item, index) in tableList2" :key="item?.id">
        <div class="model_txt">
          <div class="model_subject">
            {{ index + 1 }}、{{ item.questionSubject }}
          </div>
          <div class="model_option">
            <div
              v-for="items in item.optionMiniResponses"
              :key="items.id"
              style="margin: 5px 0"
            >
              <div v-if="items.optionType == 1">
                {{ items.questionOption }}、{{ items.optionContent }}
              </div>
              <div
                v-if="items.optionType == 2"
                style="display: flex; float: left; margin: 15px 15px 15px 0"
              >
                <div style="margin: auto 0">{{ items.questionOption }}、</div>
                <el-image
                  v-if="items.optionContent"
                  style="width: 60px; height: 60px"
                  :src="baseURL + items.optionContent"
                />
              </div>
            </div>
          </div>
          <div class="icon_img">
            <el-image
              :src="
                item.questionState == '1'
                  ? state1
                  : item.questionState == '2'
                  ? state2
                  : item.questionState == '3'
                  ? state3
                  : null
              "
              style="width: 40px; height: 40px"
            ></el-image>
          </div>
          <div class="model_answer">
            答案：{{ item.rightStrQuestionOptions }}
          </div>
          <div class="model_btn">
            <el-button
              size="small"
              plain
              :icon="Edit"
              type="warning"
              @click="edit(item)"
            >
              编辑
            </el-button>
            <el-button
              size="small"
              plain
              :icon="Delete"
              type="danger"
              @click="del(item)"
            >
              删除
            </el-button>
          </div>
        </div>
      </div>
      <div class="title" v-if="tableList3.length > 0">
        <div class="title_1"></div>
        判断题：
      </div>
      <div class="model" v-for="(item, index) in tableList3" :key="item?.id">
        <div class="model_txt">
          <div class="model_subject">
            {{ index + 1 }}、{{ item.questionSubject }}
          </div>
          <div class="model_option">
            <div
              v-for="items in item.optionMiniResponses"
              :key="items.id"
              style="margin: 5px 0"
            >
              <div v-if="items.optionType == 1">
                {{ items.questionOption }}、{{ items.optionContent }}
              </div>
              <div
                v-if="items.optionType == 2"
                style="display: flex; float: left; margin: 15px 15px 15px 0"
              >
                <div style="margin: auto 0">{{ items.questionOption }}、</div>
                <el-image
                  v-if="items.optionContent"
                  style="width: 60px; height: 60px"
                  :src="baseURL + items.optionContent"
                />
              </div>
            </div>
          </div>
          <div class="icon_img">
            <el-image
              :src="
                item.questionState == '1'
                  ? state1
                  : item.questionState == '2'
                  ? state2
                  : item.questionState == '3'
                  ? state3
                  : null
              "
              style="width: 40px; height: 40px"
            ></el-image>
          </div>
          <div class="model_answer">
            答案：{{ item.rightStrQuestionOptions }}
          </div>
          <div class="model_btn">
            <el-button
              size="small"
              plain
              :icon="Edit"
              type="warning"
              @click="edit(item)"
            >
              编辑
            </el-button>
            <el-button
              size="small"
              plain
              :icon="Delete"
              type="danger"
              @click="del(item)"
            >
              删除
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <EditForm
      v-model:visible="editFormVisible"
      v-model:data="rowData"
      @submit="initList"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete, Edit, Search } from "@element-plus/icons-vue";
import {
  questionImportDetail,
  delQuestion,
  selectQuestionImportDetailById,
} from "@/api/databaseManage.ts";
import EditForm from "@/views/databaseManage/databaseList/components/EditForm.vue";
import { baseURL } from "@/util/request";
import state1 from "@/assets/images/icon_weiruku.png";
import state2 from "@/assets/images/icon_yiruku.png";
import state3 from "@/assets/images/icon_yiyichu.png";
import { bus } from "@/util";

let rowData: any;
const editFormVisible = ref<boolean>(false);
const searchWords = reactive({
  id: "",
});
const tableList1 = ref([]);
const tableList2 = ref([]);
const tableList3 = ref([]);

async function initList() {
  let params = {
    ...searchWords,
  };
  if (!params.id) {
    tableList1.value = [];
    tableList2.value = [];
    tableList3.value = [];
    return;
  }
  const { data, msg, success } = await questionImportDetail(params);
  if (!success) {
    ElMessage.error(msg);
    return;
  }
  tableList1.value = data?.[1] || [];
  tableList2.value = data?.[2] || [];
  tableList3.value = data?.[3] || [];
}

async function edit(row: any) {
  const { data, msg, success } = await selectQuestionImportDetailById({
    questionId: row.id,
  });
  if (!success) {
    ElMessage.error(msg);
    return;
  }
  rowData = data;
  editFormVisible.value = true;
}
async function del(row: any) {
  ElMessageBox.confirm(`是否删除?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const { success, msg } = await delQuestion({ id: row?.id });
    if (!success) {
      ElMessage.error(msg);
      return;
    }
    ElMessage.success("操作成功");
    await initList();
  });
}

onMounted(async () => {
  bus.on("searchValue", (id: string | any) => {
    searchWords.id = id || null;
    initList();
  });
});

watch(searchWords, async () => {
  await initList();
});
</script>

<style scoped lang="scss">
@import "@/assets/styles/common";
.containList {
  height: $router-component-contain-height;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid #eee;
  overflow-y: auto;
}
.model {
  margin: 10px 20px;
  display: flex;
  position: relative;
  .model_txt {
    flex:1;
    // width: 690px;
    border: 1px solid #ccc;
    display: block;
    padding: 10px 20px;
    .model_option {
      margin: 5px 0 0 25px;
    }
    .icon_img {
      position: absolute;
      left: 20px;
      bottom: 10px;
    }
    .model_answer {
      text-align: right;
      margin-bottom: 10px;
      clear: left;
    }
  }
  .model_btn {
    .el-button {
      float: right;
      margin-left: 10px;
    }
  }
}
.title {
  margin: 10px 0 0 20px;
  .title_1 {
    float: left;
    width: 8px;
    height: 25px;
    background: blue;
    margin-right: 5px;
  }
}
</style>
